<template>
  <div class="diy-form-color-linear">
    <div>
        <el-color-picker v-model="colorValue" @active-change="activeChange" />
    </div>
    <div  class="ml10">
        <el-color-picker v-model="color2Value" @active-change="active2Change" />
    </div>
  </div>
</template>
  <script lang="ts">
export default {
  name: "storeDiyFormColorLinearBtn",
};
</script>
  <script  lang="ts" setup >
import { ref, getCurrentInstance, watch, onMounted } from "vue";
const props = withDefaults(
  defineProps<{
    color: string;
    color2: string;
  }>(),
  {
    color: "",
    color2: "",
  }
);

const emit = defineEmits(["update:color", "update:color2", "change"]);

const colorValue = ref<string>(props.color);

const color2Value = ref<string>(props.color2);

const activeChange = (val: string) => {
  emit("update:color", val);
  emit("change", {
    color: val,
  });
};
const active2Change = (val: string) => {
  emit("update:color2", val);
  emit("change", {
    color2: val,
  });
};
</script>

<style scoped>
.diy-form-color-linear{
    display: flex;
}
</style>